<template>
  <!--巡检管理--巡检内容管理-->
  <div class="content-area" style="position: relative">
    <!-- 位置模块 -->
    <HeadTop></HeadTop>
    <!--内容-->
    <div class="main-content">
      <div class="content-info" style="width: 100%">
        <!-- 表格数据与翻页合并模块 -->
        <DataTable :childLoad="parentLoad" :dataTableObj="dataTableObj" v-on:getPageNo="searchByPageNo" v-on:handlePageReload="pageReload"
                   v-on:getPageSize="searchByPageSize" v-on:selectChange="checkChange">
          <!--除查询外的操作-->
          <div slot="operate">
            <div class="some-operate">
              <button class="some-btn some-btn-add" v-if="pagePower['005002001']"
                      @click="$goRoute( '/manage/examineMgr/examineContentMgr/addItem?type=add');">添加
              </button>
              <button class="some-btn some-btn-delete" v-if="pagePower['005002003']" @click="delItems">批量删除</button>
            </div>
          </div>
          <!-- 额外的操作以及其他因素 -->
          <el-table-column type="selection" width="55" fixed="left" v-if="pagePower['005002003']"></el-table-column>
          <!--巡检要求超出长度悬浮框-->
          <el-table-column fixed="right" align="center" label="巡检要求" width="450">
            <template slot-scope="scope">
              <template v-if="scope.row.requestShow">
                <el-popover ref="popover" placement="top" width="500" popper-class="el_pop standardPopo" trigger="hover"
                            :content="scope.row.request"></el-popover>
                <div v-popover:popover>
                  <div class="item-names over-pop">{{scope.row.request}}</div>
                </div>
              </template>
              <template v-else>
                <div class="item-names">{{scope.row.request}}</div>
              </template>
            </template>
          </el-table-column>
          <el-table-column fixed="right" align="center" label="添加时间" width="120">
            <template slot-scope="scope">
              <div class="item-names">{{scope.row.createDate}}</div>
            </template>
          </el-table-column>
          <el-table-column fixed="right" v-if="pagePower['005002002']" align="center" label="是否启用" width="150">
            <template slot-scope="scope">
              <el-switch active-color="#67c23a" inactive-color="#ACBCC9" v-model="scope.row.isUse" @change="statusChange(scope.row)"></el-switch>
            </template>
          </el-table-column>
          <el-table-column fixed="right" align="center" label="操作" width="150" v-if="pagePower['005002002'] || pagePower['005002003']">
            <template slot-scope="scope">
              <div class="item-route" v-if="scope.row.isUse">
                <div class="item-route-link" v-if="pagePower['005002002']" @click="$goRoute('/manage/examineMgr/examineContentMgr/editItem?type=edit&id='+ scope.row.id)">编辑</div>
                <div class="item-route-link" v-if="pagePower['005002003']" @click="delItems(scope.row.id, scope.row.index)">删除</div>
              </div>
            </template>
          </el-table-column>
        </DataTable>
      </div>
    </div>
  </div>
</template>
<script>
  // 表格数据
  import DataTable from "../../../components/dataTable/dataTable"
  import com from "../../../js/common"
  import HeadTop from "../../../components/head-top/head-top"
  import {getExamineItems, examineItemDel, examineItemUpdate} from '@/api/getData'

  export default {
    name: 'examineItems',
    components: {
      DataTable,
      HeadTop
    },
    data() {
      return {
        parentLoad: '加载中...',    // 加载状态
        pagePower: JSON.parse(com.getStore('pagePowers'))['005002'] ? JSON.parse(com.getStore('pagePowers'))['005002'] : {},
        requestShow: false,
        // 表格组件数据
        dataTableObj: {
          // 表格数据
          tableData: [],
          // 表格标题
          tableColumns: [
            {
              text: '序号',
              width: '60',
              attributeName: 'index'
            },
            {
              text: '巡检内容',
              width: '250',
              attributeName: 'name'
            },
          ],
          // 翻页所需数据
          pageObj: {
            // 每页分为几条数据
            pageSize: 10,
            // 总共多少数据
            pageNum: 0,
            //当前页
            pageNo: 1,
            searchStatus: 2
          },
          checkIds: [],
        },
      }
    },
    // 页面装载中,此时获取后端数据
    mounted() {
      // 获取当前页面所需数据
      this.getExamineItemsData();
    },
    methods: {
      // 获取页面所需数据
      getExamineItemsData() {
        this.dataTableObj.pageObj.searchStatus = 2
        this.dataTableObj.tableData = []
        getExamineItems({
          pageNo: this.dataTableObj.pageObj.pageNo,
          pageSize: this.dataTableObj.pageObj.pageSize,
        }).then((data) => {
          this.dataTableObj.pageObj.searchStatus = 1
          let infoArr = data.data.data.data;
          if (infoArr.length > 0) {
            let startPage = (this.dataTableObj.pageObj.pageNo - 1) * this.dataTableObj.pageObj.pageSize + 1;
            infoArr.forEach((i, e) => {
              i.index = startPage + e;
              i.transferStatus = i.status == 1 ? '正常' : '禁用';
              i.isUse = i.status === 1;
              i.requestShow = i.request.length > 35;
              i.createDate = i.createDate ? i.createDate.substring(0, 10) : i.createDate;
            })
          } else {
            this.parentLoad = '暂无数据'    // loading(暂无数据)
          }
          this.dataTableObj.tableData = infoArr
          this.dataTableObj.pageObj.pageNum = data.data.data.totalRecord;
        }).catch((err) => {
          this.parentLoad = err.data.message    // loading(查询失败)
          this.dataTableObj.pageObj.searchStatus = 0
        })
      },

      // 每页多少内容
      searchByPageSize(val) {
        this.dataTableObj.pageObj.pageSize = val;
        this.getExamineItemsData()
      },

      // 切换第几页
      searchByPageNo(val) {
        this.dataTableObj.pageObj.pageNo = val;
        this.getExamineItemsData()
      },

      // 表格选框勾选
      checkChange(val) {
        let checkIds = [];
        val.forEach(function (i) {
          checkIds.push(i.id);
        })
        this.dataTableObj.checkIds = checkIds;
      },

      // 批量删除
      delItems(res) {
        let idArr = [];
        if (typeof res == 'number') {
          idArr[0] = res;
        } else {
          idArr = this.dataTableObj.checkIds
        }
        if (idArr.length <= 0) {
          this.$message.warning('请至少选择一条数据进行操作');
        } else {
          this.$confirm('确定要删除吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            examineItemDel(idArr).then((res) => {
              this.getExamineItemsData();
            }).catch((err) => {
              this.$message.error('操作失败: ' + err.data.message)
            })
          }).catch(_ => {});
        }
      },

      // 改变状态是否禁用状态
      statusChange(row) {
        const isuse = !row.isUse;
        let infolList = this.dataTableObj.tableData;
        examineItemUpdate({
          id: row.id,
          status: row.status == 1 ? 0 : 1
        }).then((res) => {
          this.$message.success({
            message: isuse ? '禁用成功' : '启用成功',
          });
        }).catch((err) => {
          row.isUse = isuse;
          this.dataTableObj.tableData = infolList;
          this.$message.error({
            message: '操作失败: ' + err.data.message,
          });
        })
      },

      // 页面刷新
      pageReload(){
        this.getExamineItemsData();
      }
    }
  }
</script>
<style lang="scss" type="text/scss">
  @import "../../../style/entry/components/pageCommon";
</style>

